import React from 'react';
import {Row, Col, BackTop, Button, notification, message} from 'antd';
import MobileHeader from './mobile_header';
import MobileFooter from './mobile_footer';
import '../../../css/mobile_news_deatils.css'
import ComponentComments from '../comments';

export default class MobileNewsDetails extends React.Component {
    constructor() {
        super();
        this.state = {
            newsItem: ''
        };
    };

    componentDidMount() {
        var myFetchOptions = {
            method: 'GET'
        };
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey="
            + this.props.params.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({newsItem: json});
                document.title = this.state.newsItem.title + " - React News ";
            })
    };

    createMarkup() {
        return {__html: this.state.newsItem.pagecontent};
    };

    // 文章收藏
    addUserCollection() {
        var myFetchOptions = {
            method: 'GET'
        };
        if (!localStorage.userid || localStorage.userid == '') {
            message.error('请登录后再进行收藏~')
            return
        }
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=uc&userid="
            + localStorage.userid + "&uniquekey=" + this.props.params.uniquekey, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                //收藏成功以后进行一下全局的提醒
                notification['success']({message: 'ReactNews提醒', description: '收藏此文章成功'});
            });
    };

    render() {
        notification.config({
            duration: 2
        });
        return (
            <div id="mobileDetailsContainer">
                <MobileHeader></MobileHeader>
                <div className="ucmobileList">
                    <Row>
                        <Col span={24} className="container">
                            <div className="articleContainer" dangerouslySetInnerHTML={this.createMarkup()}></div>
                            {/*收藏按钮*/}
                            <div style={{textAlign: 'right', paddingBottom: '10px'}}>
                                <Button type="primary" htmlType="button"
                                        onClick={this.addUserCollection.bind(this)}>收藏该文章</Button>
                            </div>
                            <hr/>
                            {/*评论组件*/}
                            <ComponentComments/>
                        </Col>
                    </Row>
                    <MobileFooter></MobileFooter>
                    <BackTop/>
                </div>
            </div>
        );
    };
}
